<route lang="json5" type="page">
{
  layout: "base",
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "我的",
    "app-plus": {
      titleNView: false,
    },
  },
}
</route>
<template>
  <view class="overflow-hidden my-container">
    <!-- 头部信息 -->
    <Information />
    <!-- 主要内容区域 -->
    <view class="p-[32rpx]">
      <view class="flex justify-between mb-[10rpx]">
        <view class="back-btn" @click="handleBack">
          <uni-icons type="left" size="24" color="#333"></uni-icons>
        </view>
        <button class="edit-btn" open-type="share">邀请入会</button>
      </view>
      <!-- 成员展示区 -->
      <view class="member-list">
        <!-- 超级管理员区域 -->
        <view class="mb-[48rpx]">
          <view class="text-32rpx font-bold mb-[32rpx]">超级管理员</view>
          <view class="grid grid-cols-4 gap-[32rpx]">
            <view
              v-for="(admin, index) in superAdmins"
              :key="'admin' + index"
              class="member-item"
            >
              <image
                class="w-[120rpx] h-[120rpx] rounded-full mb-[16rpx]"
                :src="admin.avatarUrl || '/static/images/avater.jpeg'"
                mode="aspectFill"
              />
              <view class="text-24rpx text-center truncate">{{
                admin.nickname || "未知用户名"
              }}</view>
            </view>
          </view>
        </view>
        <!-- 管理员区域 -->
        <view class="mb-[48rpx]">
          <view class="text-32rpx font-bold mb-[32rpx]">管理员</view>
          <view class="grid grid-cols-4 gap-[32rpx]">
            <view
              v-for="(admin, index) in admins"
              :key="'admin' + index"
              class="member-item"
            >
              <view @click="() => setUserInfoDrawer(admin)">
                <image
                  class="w-[120rpx] h-[120rpx] rounded-full mb-[16rpx]"
                  :src="admin.avatarUrl || '/static/images/avater.jpeg'"
                  mode="aspectFill"
                />
                <view class="text-24rpx text-center truncate">{{
                  admin.nickname || "未知用户名"
                }}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 群成员区域 -->
        <view>
          <view class="text-32rpx font-bold mb-[32rpx]">
            <text>群成员</text>
            <text class="text-24rpx text-#999 ml-16rpx"
              >({{ members.length }}人)</text
            ></view
          >
          <view class="grid grid-cols-4 gap-[32rpx]">
            <view
              v-for="(member, index) in members"
              :key="'member' + index"
              class="member-item"
            >
              <view @click="() => setUserInfoDrawer(member)">
                <image
                  class="w-[120rpx] h-[120rpx] rounded-full mb-[16rpx]"
                  :src="member.avatarUrl || '/static/images/avater.jpeg'"
                  mode="aspectFill"
                />
                <view class="text-24rpx text-center truncate">{{
                  member.nickname || "未知用户名"
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <wd-popup
        custom-style="padding: 20px 10px; overflow: hidden; height: 100px; border-top-left-radius: 10px; border-top-right-radius: 10px"
        v-model="showInfoDrawer"
        position="bottom"
        closable
      >
        <button
          v-if="managerPermission(currentUserInfo.role)"
          class="btn-secondary mt-5"
          @click="() => updateAdmin('cancel')"
        >
          取消管理员
        </button>

        <button
          @click="() => updateAdmin('set')"
          v-if="currentUserInfo.role === 1"
          class="btn-primary mt-5"
        >
          设为管理员
        </button>
      </wd-popup>
    </view></view
  >
</template>
<script lang="ts" setup>
import { useToast } from "wot-design-uni";
import Information from "@/components/top-information/top-information.vue";
import { ref } from "vue";
import { getWxUserList, wxUserUpdate } from "@/service/my";
import { superManagerPermission, managerPermission } from "@/utils";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const superAdmins = ref<any>([]);
const admins = ref<any>([]);
const members = ref<any>([]);
const memberCount = ref(64);
const showInfoDrawer = ref(false);
const currentUserInfo = ref({});
const updateAdmin = async (type) => {
  let role = 1;
  if (type === "cancel") {
    role = 1;
  } else {
    role = 2;
  }
  const res = await wxUserUpdate({ id: currentUserInfo.value.id, role });
  if (res?.code === 200) {
    getList();
    showInfoDrawer.value = false;
  } else {
    uni.showToast({
      title: res?.msg || "操作失败",
      icon: "none",
      mask: false,
    });
  }
};
const getList = async () => {
  try {
    const showData: any = await getWxUserList({
      current: "1",
      size: "1000",
    });
    superAdmins.value =
      showData.data.records?.filter((item) => item.role === 3) || [];
    admins.value =
      showData.data.records?.filter((item) => item.role === 2) || [];
    members.value =
      showData.data.records?.filter((item) => item.role === 1) || [];
  } catch (error) {}
};
const handleBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({ url: "/pages/my/index" });
    },
  });
};
onMounted(async () => {
  getList();
});

const setUserInfoDrawer = (item) => {
  console.log("userInfo", userInfo.value);
  if (!superManagerPermission(userInfo.value.role)) {
    return;
  }

  showInfoDrawer.value = true;
  currentUserInfo.value = item;
};
</script>
<style lang="scss" scoped>
.edit-btn {
  height: 46.8rpx;
  margin: 0;
  margin-left: 8rpx;
  font-size: 21.6rpx;
  line-height: 46.8rpx;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  background: rgba(27, 27, 27, 1);
  border-radius: 239.4rpx;
}
.back-btn {
  display: flex;
  align-items: center;
  height: 100%;
}
</style>
